<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布页面</title>
</head>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
    body {
        padding: 0;
        margin: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #fff1f1;
    }
    .container {
        width: 550px;
        height: 94%;
        position: absolute;
        right: 50%;
        top: 5%;
        background-color: white!important;
        transform: translateX(50%);
        font-family: MathJax_Fraktur,'Times New Roman',Times,STIXGeneral,serif;
        display: flex;
        flex-direction: column;
    }
    .nav {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 17px;
    }
    .publish-button {
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        background-color: #eeeeee;
        color: #c7c7c7;
        border-radius: 5px;
        font-size: 14px;
    }
    #iconfont:before {
        font-size: 22px;
    }
    textarea {
        background-color: white;
        border: 0;
        resize: none;
        outline: none;
        font-size: 17px;
        border-radius: 5px;
        margin: 20px 35px;
        height: 50px;
        flex: 1;
        caret-color: #09c060;
        padding: 10px;
    }
    textarea::placeholder {
        color: #999999;
    }
</style>
<body>
<div class="container">
    <div class="nav">
        <div style="cursor: pointer" onclick="back()" id="iconfont" class="iconfont icon-fanhui"></div>
        <div>发布文字</div>
        <div style="cursor: pointer" class="publish-button" onclick="send1()">
            发表
        </div>
    </div>

    <textarea onkeydown="handleKeyDown(event,this)" oninput="handleInput(event,this.parentNode)" placeholder="这一刻的想法…"></textarea>
</div>

</body>
</html>
<script>
    window.onerror = function(errorMessage, scriptURL, lineNumber, columnNumber, errorObj) {
        // 检查错误是否是 401 状态码
        if (errorObj.status === 401) {
            // 执行重新登录操作
            // 先清除localstorage中的数据
            localStorage.clear();
            window.location.href = 'login.html'
        }
    };
    const USERNAME = "user1";
    // const USERNAME = localStorage.getItem('username');

    function back() {
        window.location.href = 'pyq.html';
    }

    function handleKeyDown(event, element) {
        if(event.keyCode === 13){
            event.preventDefault();
            if (element.value.trim() !== '') {
                send(element);
            }
        }
    }
    function send1() {
        send(document.querySelector('textarea'));
    }
    function send(element) {
        // 直接发送 创建一条朋友圈
        // 构造请求体
        const pyq = {
            username: USERNAME,
            content: element.value.trim()
        }
        fetch('http://localhost/pyq/publishPyq', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': localStorage.getItem("token")
            },
            body: JSON.stringify(pyq)
        }).then(response => {
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            return response.json(); // 解析响应的JSON数据
        }).then(data => {
            if (data.flag) {
                console.log('发布成功');
                window.location.href = 'pyq.html';
            }else {
                console.log('发布失败');
            }
        }).catch(error => {
            // 处理请求过程中的错误
            console.error('请求出现问题:', error);
            alert('您尚未登录，请先登录！');
            localStorage.clear();
            window.location.href = 'login.html'
        });
    }
    function handleInput(event,element) {
        const textarea = element.querySelector('textarea');
        const publishButton = element.querySelector('.publish-button');

        if (textarea.value.trim() === '') {
            publishButton.style.cursor = '';
            publishButton.style.backgroundColor = '#eeeeee';
            publishButton.style.color = '#c7c7c7';
        } else {
            publishButton.style.cursor = 'pointer';
            publishButton.style.backgroundColor = '#02c55e';
            publishButton.style.color = 'white';
        }
    }
</script>
